<template>
  <el-dialog :title="title" center :visible.sync="openState" :close-on-click-modal="false" width="1024px" append-to-body v-if="openState">
    <el-form ref="detailForm" :model="detailForm" :rules="rules" label-width="150px">
      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="兑付国债银行大类" prop="debtBankType">
            <el-select style="width: 100%;" v-model="detailForm.debtBankType" placeholder="兑付国债银行大类">
              <el-option
                v-for="dict in dictMap.DEBT_BANK_TYPE127"
                :key="dict.value"
                :label="`${dict.value}-${dict.text}`"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="本金代码" prop="capitalCode">
            <el-input v-model="detailForm.capitalCode" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="本金金额币种" prop="capitalCurcd">
            <el-input v-model="detailForm.capitalCurcd" :disabled="true"/>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="本金金额" prop="capitalAmount">
            <ht-amount-input
              v-model="detailForm.capitalAmount"
              placeholder="本金金额"
            ></ht-amount-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="利息代码" prop="accrualCode">
            <el-input v-model="detailForm.accrualCode" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="利息金额币种" prop="accrualCurcd">
            <el-input v-model="detailForm.accrualCurcd" :disabled="true"/>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="利息金额" prop="accrualAmount">
            <ht-amount-input
              v-model="detailForm.accrualAmount"
              placeholder="利息金额"
            ></ht-amount-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" align="center" class="dialog-footer">
      <el-button type="primary" @click="confirm">提 交</el-button>
      <el-button type="primary" @click="close">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>

import HtAmountInput from "@/views/components/HtAmountInput";

export default {
  name: "listB307",
  components: { HtAmountInput },
  props: {
    dictMap: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      title: "",
      openState: false,
      defaultSearchKey: "cnapsBankSearch-dialog",
      // 来源标识 为了服用区分是哪个选项触发的
      fromFlag: "",
      dictMapAsync: this.dictMap,
      tableLoadingState: false,
      formOptions: [],
      detailForm:{
        debtBankType:'',
        capitalCode:'',
        capitalCurcd:'CNY',
        capitalAmount:0,
        accrualCode:'',
        accrualCurcd:'CNY',
        accrualAmount:0,
      },
      index:'',
      rules:{
        debtBankType : [ { required: true, message: "请输入兑付国债银行大类", trigger: "blur" }],
        capitalCode : [ { required: true, max:12,message: "请输入本金代码", trigger: "blur" }],
        capitalAmount:[ { required: true, message: "请输入本金金额", trigger: "blur" }],
        accrualCode: [ { required: true, max:12,message: "请输入利息代码", trigger: "blur" }],
        accrualAmount:[ { required: true, message: "请输入利息金额", trigger: "blur" }],
      }
    }
  },
  mounted() {

  },
  methods: {
    show(row,index) {
      this.openState = true;
      console.log(index)
      if(row){
        this.$set(this.detailForm,"debtBankType",row.debtBankType)
        this.$set(this.detailForm,"capitalCode",row.capitalCode)
        this.$set(this.detailForm,"capitalCurcd",row.capitalCurcd)
        this.$set(this.detailForm,"capitalAmount",row.capitalAmount)
        this.$set(this.detailForm,"accrualCode",row.accrualCode)
        this.$set(this.detailForm,"accrualCurcd",row.accrualCurcd)
        this.$set(this.detailForm,"accrualAmount",row.accrualAmount)
      }else{
        this.$set(this.detailForm,"debtBankType",'')
        this.$set(this.detailForm,"capitalCode",'')
        this.$set(this.detailForm,"capitalCurcd",'CNY'),
        this.$set(this.detailForm,"capitalAmount",0)
        this.$set(this.detailForm,"accrualCode",'')
        this.$set(this.detailForm,"accrualCurcd",'CNY')
        this.$set(this.detailForm,"accrualAmount",0)
      }
      if(index!==undefined){
        this.index=index;
      }else{
        this.index=undefined;
      }
    },
    close() {
      this.openState = false;
    },
    // 点击确认数据
    confirm() {
      this.$refs["detailForm"].validate((valid) => {
        console.log(this.index);
        if (valid) {
          const  list={

            debtBankType:this.detailForm.debtBankType,
            capitalCode:this.detailForm.capitalCode,
            capitalCurcd:this.detailForm.capitalCurcd,
            capitalAmount:this.detailForm.capitalAmount,
            accrualCode:this.detailForm.accrualCode,
            accrualCurcd:this.detailForm.accrualCurcd,
            accrualAmount:this.detailForm.accrualAmount,
          }
          this.$emit("confirm", list,this.index);
          this.openState = false;
          this.resetForm("detailForm");
        }})
    },
  },
};
</script>
<style scoped></style>
